<template>
  <div class="app-container">
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">基本信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">课程名称</el-col>
        <el-col :span="6" class="table-cell-title">ID</el-col>
        <el-col :span="12" class="table-cell-title">简介</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">{{ course.name }}</el-col>
        <el-col :span="6" class="table-cell">{{ course.id }}</el-col>
        <el-col :span="12" class="table-cell">{{ course.desc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell-title">最近更新</el-col>
        <el-col :span="6" class="table-cell-title">录入时间</el-col>
        <el-col :span="12" class="table-cell-title">考试开放时间段</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell" style="font-size: 13px">{{
          course.updateTime | formatDateTime
        }}</el-col>
        <el-col :span="6" class="table-cell">{{
          course.createTime | formatDateTime
        }}</el-col>
        <el-col :span="12" class="table-cell"
          >{{ course.startTime | formatDateTime }} 到
          {{ course.endTime | formatDateTime }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell-title">开课时间</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell" style="font-size: 13px">{{
          course.openTime | formatDateTime
        }}</el-col>
      </el-row>
    </div>
    <el-table
      :data="course.signList"
      border
      size="mini"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="checked" label="是否启用" width="100">
        <template slot-scope="scope">{{
          ["否", "是"][scope.row.checked]
        }}</template>
      </el-table-column>
      <el-table-column prop="signInStartTime" label="签到">
        <template slot-scope="scope">
          {{ scope.row.signInStartTime }}-{{ scope.row.signInEndTime }}
        </template>
      </el-table-column>
      <el-table-column prop="signInEndTime" label="签退">
        <template slot-scope="scope">
          {{ scope.row.signOutStartTime }}-{{ scope.row.signOutEndTime }}
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :data="course.userList"
      size="mini"
      style="width: 100%; margin-top: 20px"
      border
    >
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column label="社区" align="center">
        <template slot-scope="scope">{{ scope.row.communityName }}</template>
      </el-table-column>
      <el-table-column label="身份" align="center">
        <template slot-scope="scope">{{
          userIdentityList[scope.row.userIdentity]
        }}</template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">课程封面</span>
    </div>
    <img
      v-if="course.image"
      class="coursePic"
      :src="course.image"
      style="width: 200px"
    />
    <el-row type="flex" justify="end" style="margin-top: 20px">
      <el-col :span="2">
        <el-button @click="back">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { collegeById } from '@/api/college'
import { formatDate } from '@/utils/date'
export default {
  name: 'CourseList',
  data () {
    return {
      course: {},
      list: null,
      total: null,
      listLoading: false,
      userIdentityList: { '01': '居民', '02': '居委会', '03': '物业公司', '04': '业委会', '05': '物管会', '06': '管理员', '07': '供应商', '08': '政府组织', '09': '其他' },

    }
  },
  created () {
    collegeById({ id: this.$route.query.id }).then(response => {
      this.course = response.data
    })
  },
  filters: {
    formatCouerseType (typeList) {
      let type = ''
      typeList && typeList.map((item, index) => {
        type = type + item.name + (typeList.length === (index + 1) ? '' : '/')
      })
      return type
    },
    formatDateTime (time) {
      if (time == null || time === '') {
        return 'N/A'
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    }

  }
}
</script>
<style scoped>
.app-container {
  width: 80%;
  margin: 20px auto;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}

.coursePic {
  margin-top: 20px;
  max-width: 100%;
}
</style>
